var jModal = (function(){
    var method = {},
        $overlay,
        $modal,
        $head,
        $title,
        $close,
        $body,
        $load,
        $content,
        $foot,
        $ok,
        $cancel,
        default_settings = {
            fadeIn: 400,
            fadeOut: 500,
            loading: false,
            timeout: 0,
            ok: false,
            title: 'jModal Title',
            close: true,
            on_close: function() {},
            on_ok: function() {},
            on_cancel: function() {},
            timeout_handler: null
        },
        settings = {};

    // Center the modal
    method.center = function() {
        var top, left;
        top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
        left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
        $modal.css({
            top: top,
            left: left
        });
    };

    // Open the modal
    method.open = function(_settings) {
        settings = $.extend({}, default_settings, _settings);
        settings.opening = true;

        // Close if opening
        $modal.css('display') != 'none' || $modal.css('display', 'none');

        $content.empty().append(settings.content);
        $title.empty().append(settings.title);

        $content.removeClass('error warning').addClass(settings.type);

        if (settings.ok) {
            $ok.show();
        } else {
            $ok.hide();
        }

        if (settings.close) {
            $close.show();
            $cancel.show();
        } else {
            $close.hide();
            $cancel.hide()
        }

        method.center();
        $(window).bind('resize.modal', method.center);

        // Init values
        !settings.loading && $load.hide();

        $modal.fadeIn(settings.fadeIn);
        $overlay.fadeIn(settings.fadeIn);

        settings.timeout == 0 || (settings.timeout_handler = setTimeout('jModal.close()', settings.timeout));
    };

    method.close = function(timeout) {
        timeout && (settings.fadeOut = timeout);
        if (!settings.opening) {
            return false;
        }
        settings.opening = false;
        $modal.fadeOut(settings.fadeOut, function() {
            $content.empty();
            settings.on_close();
        });

        settings.timeout_handler && clearTimeout(settings.timeout_handler);
        $overlay.fadeOut(settings.fadeOut);
        $(window).unbind('resize.modal');
    };

    // Generate HTML and add it to document
    $overlay = $('<div id="jModal-overlay"></div>');
    $modal = $('<div id="jModal-modal"></div>');
    $head = $('<div id="jModal-head"></div>');
    $title = $('<span id="jModal-title"></span>');
    $close = $('<span id="jModal-x-close" class="close-button">x</span>');
    $body = $('<div id="jModal-body"></div>');
    $load = $('<div id="jModal-loading">loading ...</div>');
    $content = $('<div id="jModal-content"></div>');
    $foot = $('<div id="jModal-foot"></div>');
    $ok = $('<button class="jModal-button" id="jModal-ok">Đồng ý</button>');
    $cancel = $('<button class="jModal-button close-button" id="jModal-cancel">Đóng</button>');

    $modal.hide();
    $overlay.hide();

    $head.append($title, $close);
    $body.append($load, $content);
    $foot.append($cancel, $ok);
    $modal.append($head, $body, $foot);

    $(document).ready(function() {
        $('body').append($overlay, $modal);
    });

    $close.click(function() {
        method.close();
    });
    $cancel.click(function() {
        method.close();
        settings.on_cancel();
    });

    $ok.click(function() {
        method.close();
        settings.on_ok();
    });

    return method;
}());